let construcShow = document.querySelector('.construc_show');
// 1.云速建站渲染
parentName.forEach(({caption,info,standardList,containsList,dropdownTitle,dropdownWrapper,buyprice,oldprice,sizeTips})=>{

    // 功能包含
    let containslistRes = '';
    containsList.forEach(({name,state})=>{
        // console.log(name,state);
        containslistRes += `
        <li state='${state}'>${name}</li>
        `
    })
    // 折叠菜单
    let dropdowntitRes = '';
    dropdownTitle.forEach(item=>{
        dropdowntitRes += `
            <option value="${item}">${item}</option>
        `;
    })
    let dropdownWrapperRes = '';
    dropdownWrapper.forEach(item=>{
        dropdownWrapperRes += `
            <option value="${item}">${item}</option>
        `;
    });
    
    construcShow.innerHTML += `
        <div class="construc_item">
            <div class="ci_top">
                <h3 class='item_h3'>${caption}</h3>
                <p class='item_p'>${info}</p>
            </div>
            <div class="ci_bottom">
                <p class="standardlist">${standardList[0]} <span>${standardList[1]}</span>${standardList[2]}</p>
                <ul class="containslist clear_fix">
                    ${containslistRes}
                </ul>
                <div class="dropdown">
                    <div class="dd_box">
                        <span>规格</span>
                        <select name="dropdownTitle" id="">
                            ${dropdowntitRes}
                        </select>
                    </div>
                    <div class="dd_box">
                        <span>节点</span>
                        <select name="dropdownWrapper" id="">
                            ${dropdownWrapperRes}
                        </select>
                    </div>
                    
                </div>
                <div class="price_section">
                    <div class="ps_left">
                        <p class="buyprice"><span>￥</span><span>${buyprice}</span>/年</p>
                        <p class="oldprice">原价￥<span>${oldprice}</span>/年</p>
                    </div>
                    <div class="buybtn">立刻购买</div>
                </div>
                <ul class="sizetips">
                    <li>${sizeTips[0]}</li>
                    <li>${sizeTips[1]}</</li>
                </ul>
            </div>
        </div>
    `;
        
})

// 2.获取包含功能li标签并判断其state值来渲染对错样式
let containslist = document.querySelectorAll('.containslist li');
has(containslist);


// 3.定制网站建设渲染
let ccBox = document.querySelector('.cc_box');
cloudsiteMade.forEach(({caption,info,serviceList,supportList,price})=>{

    // 设计服务
    let servicelistRes = '';
    serviceList.forEach(({name,state})=>{
        servicelistRes += `
            <li state='${state}'>${name}</li>
        `;
    });

    // 支持服务
    let supportlistRes = '';
    supportList.forEach(({name,state})=>{
        supportlistRes += `
            <li state='${state}'>${name}</li>
        `;
    });
    
    // 渲染
    ccBox.innerHTML += `
        <li class="cc_item">
            <div class="cci_top">
                <h3 class="item_h3">${caption}</h3>
                <p class="item_p">${info}</p>
            </div>
            <div class="cci_center">
                <div class="ccic_design">
                    <h4>· 设计服务</h4>
                    <ul class="designList clear_fix">
                        ${servicelistRes}
                    </ul>
                </div>
                <div class="ccic_support">
                    <h4>· 支持服务</h4>
                    <ul class="supportList clear_fix">
                        ${supportlistRes}
                    </ul>
                </div>
            </div>
            <div class="cci_price">
                <div>
                    <p><span>￥${price.toFixed(2)}</span>/次起</p>
                    <p>* 具体详情请点击立刻购买</p>
                </div>
                <div class="buybtn">立刻购买</div>
            </div>
        </li>
    `;
});

// 4.获取设计服务的li标签并判断其state值来渲染对错样式
let designlist = document.querySelectorAll('.designList li');
has(designlist);

// 5.获取支持服务的li标签并判断其state值来渲染对错样式
let supportlist = document.querySelectorAll('.supportList li');
has(supportlist);


// 6. 渲染云服务
let serBox = document.querySelector('.ser_box');
cloudsiteMatch.forEach(({caption,info,containsList,free,newPrice,oldPrice})=>{

    // 云服务包含功能
    let cloudscontainslistRes = '';
    containsList.forEach(item=>{
        cloudscontainslistRes += `
            <li>${item}</li>
        `;
    });
    // 是否免费
    let rateRes = '';
    if(!free){
        if(oldPrice){
            rateRes = `
                <div>
                    <p><span>￥${newPrice}</span>/年起</p>
                    <span>原价￥${oldPrice}/年起</span>
                </div>
                <div class="buybtn">立刻购买</div>
            `;
        }else{
            rateRes = `
                <div>
                    <p><span>￥${newPrice}</span>/年起</p>
                </div>
                <div class="buybtn">立刻购买</div>
            `;
        }
    }else{
        rateRes = `
        <div>
            <p class='pfree'><span>免费</span></p>
        </div>
        <div class="buybtn">立刻使用</div>
        `;
    }

    serBox.innerHTML += `
        <li class="ser_item">
            <div class="si_top">
                <h3 class="item_h3">${caption}</h3>
                <p class="item_p">${info}</p>
            </div>
            <ul class="si_center">
                ${cloudscontainslistRes}
            </ul>
            <div class="si_price">
                ${rateRes}
            </div>
        </li>
    `;
})




// 封装
function has(elem){
    elem.forEach(item=>{
        if(item.getAttribute('state') === 'selected'){
            item.style.background = 'url(./images/true_03.jpg) no-repeat left 0px';
        }else{
            item.style.background = 'url(./images/false_03.jpg) no-repeat left 0px';
            item.style.color = '#a0a2a8';
        }
    });
}

